
import { Form, Input, Button, message, Space, Modal} from 'antd';
import { useStore } from '../useStore';
import { useEffect,useState } from 'react';
import { http } from "@/utils/request";
export const AddTypeModal = (prop)=>{
  const [form] = Form.useForm();
  const { TextArea } = Input;
  const [title,setTitle] = useState('新增指标类型');
  const [id,setId] = useState(null);
  // const demoData = {
  //   id:1,
  //   name:'xxx',
  //   username:'xxx',
  //   manageOrgId:1,
  //   orgId:1,
  //   orgCode:1,
  //   orgName:'1',
  //   companyCode:'1',
  //   companyName:'1',
  //   companyDiv:'1',
  //   jobId:1,
  //   jobCode:'1',
  //   jobName:'1',
  //   jobCodes:'1',
  //   roleCodes:'1',
  //   realIp:'1',
  //   xff:'1',
  // }
  const [addOrEditTypeModal,typeDetailData] = useStore((state)=>[
    state.addOrEditTypeModal,
    state.typeDetailData
  ])
  const handleCancel = () =>{
    useStore.setState({addOrEditTypeModal:{open:false}})
  }
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      console.log(values);
      // 校验成功，执行保存操作并关闭Modal
      if(title=='新增指标类型'){
        // todo:调新增接口
        addSave(values);
      }else{
        editSave(values);
        // todo:调编辑接口
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };
  //新增接口
  const addSave = async(data:object) =>{
    try {
      const res = await http.post({
        url:'/pmPerformTargetType/add',
        data:data,
      })
      if(res.code==200){
        useStore.setState({addOrEditTypeModal:{open:false}})
        message.success('类型新增成功!');
        prop.getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  }
  //编辑接口
  const editSave = async(data:object) =>{
    try {
      const res = await http.post({
        url:'/pmPerformTargetType/update',
        data:{id,...data}
      })
      if(res.code==200){
        useStore.setState({addOrEditTypeModal:{open:false}})
        message.success('类型修改成功!');
        prop.getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  }
  useEffect(()=>{
    if(!typeDetailData.id){
      setTitle('新增指标类型')
      setId(null);
      form.resetFields();
    }else{
      const data = JSON.parse(JSON.stringify(typeDetailData))
      data.itemName = data.name
      form.setFieldsValue(data)
      setId(data.id);
      setTitle('修改指标类型')
    }
  },[addOrEditTypeModal.open])
  return(
    <Modal title={title} open={addOrEditTypeModal.open} onCancel={handleCancel} footer={[
      <Button key="back" onClick={handleCancel}>
        返回
      </Button>,
      <Button key="submit" htmlType="submit" type="primary" onClick={handleOk}>
        保存
      </Button>,
    ]}>
      <Form
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          form={form}
          autoComplete="off"
        >
        <Form.Item name="code" label={'类型编码'}>
          <Input placeholder="请输入类型编码" disabled />
        </Form.Item>
        <Form.Item name="itemName" label={'类型名称'} rules={[{ required: true, message: '请填写类型名称!' }]} >
          <Input placeholder="请输入类型名称" />
        </Form.Item>
        <Form.Item name="remark" label={'备注'} rules={[{ required: true, message: '请填写备注!' }]} >
          <TextArea showCount maxLength={200} placeholder="请输入备注" />
        </Form.Item>
      </Form>
    </Modal>
  )
}